<template>
  <div class="container">
    <div class="header">
      <div class="left">
        <el-select v-model="queryParams.status" class="select">
          <template #prefix>
            <div class="select-prefix">状态：</div>
          </template>
          <el-option
            v-for="item in TypeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <!-- <el-date-picker
          v-model="dateRange"
          value-format="HH:mm"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker> -->

        <el-time-picker
          format="HH:mm"
          value-format="HH:mm"
          is-range
          arrow-control
          v-model="dateRange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        >
        </el-time-picker>
      </div>
      <div class="right">
        <el-button class="query" @click="getJingQuPage">查询</el-button>
        <el-button plain class="clear" @click="clearAll">清空</el-button>
      </div>
    </div>
    <div class="content">
      <div class="table-header">
        <span class="left">列表</span>
        <div class="right">
          <el-button
            type="primary"
            icon="el-icon-plus"
            class="add"
            @click="onAddSpot"
            >新增</el-button
          >
          <el-button
            type="primary"
            icon="el-icon-download"
            class="export"
            @click="exportExcel"
            :loading="exportLoading"
            >导出</el-button
          >
          <el-button
            icon="el-icon-refresh-right"
            class="refresh"
            @click="getJingQuPage"
            >刷新</el-button
          >
        </div>
      </div>
      <el-table
        :data="tableData"
        :header-cell-style="headerCellStyle"
        style="width: 100%"
        :loading="tableLoading"
      >
        <el-table-column type="index" label="序号" width="80" align="center" />
        <el-table-column prop="jingquName" label="景区名称" align="center" />
        <el-table-column prop="jingquAddress" label="地址" align="center" />
        <el-table-column
          prop="type"
          label="开园时间"
          align="center"
          width="200"
        >
          <template slot-scope="scope">
            {{ scope.row.jingquOpenTime }} ~
            {{ scope.row.jingquCloseTime }}
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.jingquStatus == 0">
              <i class="el-icon-success"></i>
              开放</el-tag
            >
            <el-tag v-else type="warning">
              <i class="el-icon-error" />
              关闭</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-link
              type="primary"
              class="look"
              @click="stopRoder(scope.row)"
              style="margin-right: 4px"
            >
              {{ scope.row.jingquStatus == 0 ? "停止" : "开启" }}预约</el-link
            >
            <el-link
              type="primary"
              @click="handleSee(scope.row, 0)"
              style="margin-right: 4px"
              >查看</el-link
            >
            <el-link
              type="success"
              style="margin-right: 4px"
              @click="handleSee(scope.row, 1)"
              >编辑</el-link
            >
            <el-link
              type="warning"
              style="margin-right: 4px"
              @click="handleDelete(scope.row)"
              >删除</el-link
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getJingQuPage"
        />
      </div>
    </div>
    <see-info
      :isShowDia="isSee"
      @closeSeeDia="closeSeeDiaFun"
      :seeDiaInfo="seeInfo"
    />
  </div>
</template>

<script>
import SeeInfo from "./comp/SeeInfo.vue";
import {
  jingQuPageApi, // 景区分页
  stopOrderApi, // 停止预约,
  jingquExportApi, // 导出景区
  getJingDianByJingQuIdApi, // 通过id获取景区中的景点
  delJingQuApi, // 删除景区
} from "@/api/YApi/scenicSpot";
export default {
  components: { SeeInfo },
  data() {
    return {
      seeInfo: {},
      isSee: false,
      tableLoading: false,
      exportLoading: false,
      total: 0,
      dateRange: "",
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        startTime: null,
        endTime: null,
        status: null, // 状态(0开放 1关闭)
      },
      // 新增
      isShowAdd: false,

      TypeList: [
        { label: "全部", value: null },
        { label: "开放", value: "0" },
        { label: "关闭", value: "1" },
      ],
      searchText: "",
      tableData: [],
      currentPage: 1,
    };
  },
  computed: {
    headerCellStyle() {
      return {
        "font-size": "16px",
        "font-weight": 400,
        color: "#999999",
        background: "#fff",
      };
    },
  },
  methods: {
    // 清空
    clearAll() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        startTime: null,
        endTime: null,
        status: null, // 状态(0开放 1关闭)
      };
      this.dateRange = "";
      this.getJingQuPage();
    },

    // 关闭查看
    closeSeeDiaFun() {
      this.isSee = false;
      this.seeInfo = {};
    },
    // 查看
    handleSee(row, type) {
      this.seeInfo = row;
      getJingDianByJingQuIdApi(row.jingquId)
        .then((res) => {
          if (res.code === 200) {
            this.seeInfo.jingdianList = res.data;
            if (type == 0) {
              // 查看
              this.isSee = true;
            } else {
              // 编辑
              this.$router.push({
                path: "/publicService/scenicSpot/edit",
                query: {
                  action: "edit",
                  row: JSON.stringify(this.seeInfo),
                },
              });
            }
          } else {
            this.seeInfo.jingdianList = null;
          }
        })
        .catch((err) => {
          console.log(err);
          this.seeInfo.jingdianList = null;
        });
    },
    // 删除
    handleDelete(row) {
      const id = row.jingquId;
      this.$confirm("是否确认删除该景区的数据?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return delJingQuApi(id);
        })
        .then((res) => {
          if (res.code === 200) {
            this.getJingQuPage();
            this.msgSuccess("删除成功");
          } else {
            this.msgError("删除失败");
          }
        })
        .catch((err) => {
          console.log(err);
          this.msgError("删除失败");
        });
    },
    // 停止预约
    stopRoder(row) {
      const jingquId = row.jingquId;
      stopOrderApi(jingquId)
        .then((res) => {
          console.log(res);
          this.getJingQuPage();
        })
        .catch((err) => {
          console.log(err);
          this.getJingQuPage();
        });
    },

    // 导出景区
    exportExcel() {
      this.exportLoading = true;
      let { startTime, endTime, status } = { ...this.queryParams };
      jingquExportApi({ startTime, endTime, status })
        .then((res) => {
          console.log(res);
          if (res.code === 200 && res.data) {
            const link = document.createElement("a");
            link.href = res.data;
            link.download = "file-name.ext";
            link.click();
          }
          this.exportLoading = false;
        })
        .catch((err) => {
          console.log(err);
          this.exportLoading = false;
        });
    },

    // 获取景区列表
    getJingQuPage() {
      this.tableLoading = true;
      console.log(this.dateRange);
      if (this.dateRange) {
        this.queryParams.startTime = this.dateRange[0];
        this.queryParams.endTime = this.dateRange[1];
      }
      jingQuPageApi(this.queryParams)
        .then((res) => {
          if (res.code === 200) {
            this.total = res.total;
            this.tableData = res.rows;
            this.tableLoading = false;
          } else {
            this.tableData = [];
            this.tableLoading = false;
          }
        })
        .catch((err) => {
          console.log(err);
          this.tableData = [];
          this.tableLoading = false;
        });
    },

    // 新增景区
    onAddSpot() {
      this.$router.push({
        path: "/publicService/scenicSpot/action",
        query: {
          action: "add",
        },
      });
    },

    handleSizeChange() {},
    handleCurrentChange() {},
  },
  mounted() {
    this.getJingQuPage();
  },
};
</script>
<style scoped lang="scss">
.container {
  height: 100%;
  width: 100%;
  background-color: var(--theme_bg_color);
  display: flex;
  flex-direction: column;
  .header {
    height: 80px;
    background: #ffffff;
    border-radius: 8px 8px 8px 8px;
    padding: 24px;
    margin-bottom: 16px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    .left {
      display: flex;
      align-items: center;
      .select {
        height: 32px;
        width: 154px;
        margin-right: 16px;
        ::v-deep .el-input--prefix .el-input__inner {
          padding-left: 81px;
        }
      }
      .select-prefix {
        font-size: 14px;
        font-weight: 400;
        color: #8f959e;
        line-height: 36px;
      }
      .search {
        height: 32px;
        width: 338px;
      }
    }
    .right {
      display: flex;
      align-items: center;
      .query {
        width: 72px;
        height: 32px;
        border: 1px solid #3370ff;
        color: #3370ff;
      }
      .clear {
        width: 72px;
        height: 32px;
      }
    }
  }
  .content {
    flex: 1;
    background: var(--nav_bg_color);
    .table-header {
      padding: 21px 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #e4e7ed;
      background-color: #ffffff;
      .left {
        font-size: 16px;
        font-weight: 400;
        color: #111111;
      }
      .right {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        .add {
          background: #3370ff;
          border: none;
        }
        .export {
          background: #79cf1c;
          border: none;
        }
      }
    }
    .pagination {
      display: flex;
      justify-content: flex-end;
      margin-top: 20px;
      background-color: #ffffff;
    }
    .edit {
      margin: 0 20px;
    }
    .tag {
      width: 60px;
      height: 24px;
      border-radius: 2px 2px 2px 2px;
      font-size: 14px;
      font-weight: 400;
      display: flex;
      align-items: center;
      justify-content: center;
      i {
        margin-right: 5px;
      }
    }
    .business {
      background: #d6e2ff;
      color: #245bdb;
    }
  }
}
</style>
